/**
 *
 *  恒好贷 - 通用Button类
 *
 *  1、title表示button的文字内容
 *  2、type 包含 [ normal, confirm, cautious, inline ]
 *  3、width\height 请传入px数值
 *  4、onClick 传入回调函数
 *  5、className 传入自定义样式
 *  6、disabled 禁用按钮
 *  7、size 对应UI中相同类型不同大小的Button
 */

import React from 'react'
import './index.scss'

class Button extends React.PureComponent {
  render() {
    const {
      onClick,
      title,
      type,
      width, height,
      className,
      disabled,
      size,
    } = this.props

    const style = {}
    if (width) { style.width = `${width / 75}rem` }
    if (height) { style.height = `${height / 75}rem` }

    return (
      <button
        onClick={onClick}
        className={`${type}-btn ${className} ${size}`}
        style={style}
        disabled={disabled}
      >
        { title || '默认文字' }
      </button>
    )
  }
}

Button.defaultProps = {
  type: 'normal',
  width: 0,
  height: 0,
  className: '',
  disabled: false,
  size: 'default',
}

Button.propTypes = {
  onClick: React.PropTypes.func.isRequired,
  title: React.PropTypes.string.isRequired,
  type: React.PropTypes.oneOf(['normal', 'confirm', 'cautious', 'inline']).isRequired,
  width: React.PropTypes.number,
  height: React.PropTypes.number,
  className: React.PropTypes.string,
  disabled: React.PropTypes.bool,
  size: React.PropTypes.oneOf(['large', 'default']),
}

export default Button
